<template>
	<view class="content">
		<view class="search">
			<input type="text" v-model="data.id" placeholder="请输入会员ID" />
			<button @click="phone" class="button">搜索</button>
		</view>
		<view class="user" v-for="(item, index) in data.list" :key="index">
			<image :src="item.avatarUrl || '../../static/head.png'"></image>
			<view class="info">
				<view class="name">昵称:{{ item.name }}</view>
				<view class="phone">手机号：{{ item.mobile }}</view>
				<view style="overflow: hidden">
					<view class="id l">会员ID：{{ item.mchMemberNo }} |</view>
					<view class="id r">会员积分：{{ item.points }}</view>
				</view>
			</view>
			<button @click="vipDtl(item)">详情</button>
		</view>
	</view>
	<wd-popup v-model="data.show" round closable>
		<view class="popinfo">
			<view class="title">
				<image :src="data.item.avatarUrl || '../../static/head.png'" />
				<view class="info">
					<view class="name">昵称:{{ data.item.name }}</view>
					<view class="phone">手机号：{{ data.item.mobile }}</view>
					<view class="phone">会员ID：{{ data.item.mchMemberNo }}</view>
				</view>
			</view>
			<view class="infos">
				<view class="jifen">积分：{{ data.item.points }}</view>
				<view class="jifen">总消费：{{ data.item.totalConsumption }}</view>
				<view class="jifen">当前状态：{{ sta(data.item.status) }}</view>
			</view>
			<view class="btn">
				<view class="btn_item" @click="give">充值积分</view>
				<view class="btn_item" @click="add">扣除积分</view>
			</view>
		</view>
	</wd-popup>
	<wd-popup v-model="data.delshow" round closable>
		<view class="popinfo">
			<view class="info_title">扣除积分</view>
			<view class="inp">
				<label>扣除积分</label>
				<input v-model="data.amount" type="digit" placeholder="请输入扣除金额" />
			</view>
			<view class="inp">
				<label>扣除原因</label>
				<input v-model="data.remark" type="text" placeholder="请输入扣除原因" />
			</view>
			<button class="sub" @click="deduct">提交</button>
		</view>
	</wd-popup>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { sta } from '@/utils/utils';
import { api } from '@/api/mop_api';
import { err, toast } from '@/utils/uniapi';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
const data = reactive({
	list: [] as any[],
	item: { avatarUrl: '', name: '', mobile: '', id: '', points: '', totalConsumption: '', status: '', mchMemberNo: '' },
	show: false,
	page: 1,
	size: 20,
	pageTotal: 0,
	id: '',
	delshow: false,
	amount: '',
	remark: ''
});
onLoad(() => {
	vipList();
});
async function vipList() {
	try {
		const { page, size } = data;
		const res = await api.viplist({ page, size });
		if (res.respCode === 200) {
			const list = JSON.parse(res.source);
			console.log(list);
			data.pageTotal = res.pageTotal;
			if (data.list.length === 0) {
				data.list = list;
			} else {
				data.list = data.list.concat(list);
			}
		} else {
			toast(res.msg);
		}
	} catch (error) {
		err(error);
		throw error;
	}
}
async function vipDtl(e: any) {
	data.item = e;
	data.show = true;
	del(e.mchMemberNo);
}
function give() {
	uni.showModal({
		title: '请输入充值积分金额',
		editable: true,
		complete: async (res) => {
			if (res.confirm) {
				try {
					if (!res.content) return toast('请输入充值积分金额');
					if (isNaN(res.content)) return toast('请输入数字');
					const datas = {
						memberId: data.item.id,
						payType: 'POINT_RECHARGE',
						amount: res.content
					};
					const ress = await api.give_points(datas);
					if (ress.respCode === 200) {
						del(data.item.mchMemberNo);
						toast('充值成功');
					} else {
						toast(ress.msg);
					}
				} catch (e) {
					err(e);
				}
			}
		}
	});
}
async function del(e: any) {
	try {
		const res = await api.vipget({ mchMemberNo: e });
		if (res.respCode === 200) {
			data.item = JSON.parse(res.source);
		} else {
			toast(res.msg);
		}
	} catch (error) {
		err(error);
		throw error;
	}
}
function add() {
	data.delshow = true;
}
async function deduct() {
	try {
		const { amount, remark, item } = data;
		if (!amount) return toast('请输入扣除金额');
		if (!remark) return toast('请输入扣除原因');
		const datas = {
			amount,
			remark,
			memberId: item.id
		};
		const res = await api.points_del(datas);
		console.log(res);
		if (res.respCode === 200) {
			toast('扣除成功');
			del(item.mchMemberNo);
			data.delshow = false;
			data.amount = '';
			data.remark = '';
		} else {
			toast(res.msg);
		}
	} catch (error) {
		err(error);
	}
}
async function phone() {
	try {
		const { id } = data;
		if (!id) return toast('请输入会员ID');
		const res = await api.vipget({ mchMemberNo: id });
		if (res.respCode === 200) {
			const item = JSON.parse(res.source);
			data.item = item;
			data.show = true;
		} else {
			toast(res.msg);
		}
	} catch (error) {
		err(error);
	}
}
onReachBottom(() => {
	let { list, pageTotal, page } = data;
	if (list.length < pageTotal) {
		data.page = page + 1;
		vipList();
	} else {
		toast('已加载全部数据');
	}
});
</script>

<style scoped lang="scss">
.search {
	width: 690rpx;
	margin-top: 20rpx;
	display: flex;
	margin: 0 auto;
	input {
		width: 622rpx;
		height: 70rpx;
		background: #ffffff;
		border-radius: 20rpx;
		border: 2rpx solid #d8d8d8;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-left: 10rpx;
	}
	.button {
		padding: 0;
		margin: 0;
		width: 106rpx;
		height: 70rpx;
		background: #e30514;
		font-size: 28rpx;
		font-weight: 500;
		color: #ffffff;
		line-height: 70rpx;
		margin-left: 6rpx;
		border-radius: 20rpx;
	}
}

.user {
	width: 690rpx;
	background: #fff;
	margin: 10rpx auto;
	height: 150rpx;
	padding-top: 10rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	box-shadow: 0rpx 4rpx 10rpx rgba(10, 14, 20, 0.05);
	border-radius: 10rpx;
	image {
		width: 90rpx;
		height: 90rpx;
		margin-left: 12rpx;
	}
	.info {
		font-size: 20rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #3d3d3d;
		margin-left: 22rpx;
		.id {
			font-size: 24rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 600;
			color: #3d3d3d;
			line-height: 28rpx;
		}
	}
	button {
		padding: 0;
		margin: 0;
		width: 100rpx;
		height: 60rpx;
		background: #e30514;
		font-size: 24rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
		line-height: 60rpx;
		display: block;
		float: right;
		margin-right: 20rpx;
		margin-left: auto;
	}
}
.popinfo {
	width: 690rpx;
	height: 400rpx;
	background-color: #fff;
	padding: 20rpx;
	box-sizing: border-box;
	border-radius: 10rpx;
	.title {
		background: #fff;
		display: flex;
		align-items: center;
		padding-top: 10rpx;
		padding-bottom: 28rpx;
		border-bottom: 1rpx solid #ccc;
		image {
			width: 100rpx;
			height: 100rpx;
			background-color: #bfbfbf;
			border-radius: 50rpx;
		}
		.info {
			font-size: 20rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #3d3d3d;
			margin-left: 22rpx;
		}
	}
	.infos {
		margin-top: 21rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #3d3d3d;
		line-height: 38rpx;
	}
	.btn {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
		.btn_item {
			width: 130rpx;
			height: 60rpx;
			background: #e30514;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 600;
			color: #ffffff;
			line-height: 60rpx;
			text-align: center;
			border-radius: 20rpx;
		}
	}
	.info_title {
		position: relative;
		padding-left: 10rpx;
		font-size: 30rpx;
		font-weight: 600;
	}
	.info_title::before {
		content: '';
		display: block;
		width: 10rpx;
		height: 28rpx;
		background-color: #e30514;
		position: absolute;
		left: -6px;
		top: 50%;
		transform: translateY(-50%);
	}
	.inp {
		margin-top: 20rpx;
		label {
			font-size: 26rpx;
			font-weight: 600;
		}
		input {
			height: 60rpx;
			border: 1rpx solid #ccc;
			border-radius: 10rpx;
			margin-top: 10rpx;
			padding-left: 10rpx;
		}
	}
	.sub {
		width: 130rpx;
		background: #e30514;
		font-size: 28rpx;
		font-weight: 600;
		color: #ffffff;
		border-radius: 20rpx;
		margin-top: 10rpx;
	}
}
</style>
